<template>
  <!-- 弹出的对话框的内容 -->
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="40%"
  >
    <el-form
      ref="formRef"
      :model="addForm"
      :rules="rules"
      label-width="90px"
    >
      <el-form-item
        :label="$t('formgen.formQuestion.name')"
        prop="name"
      >
        <el-input
          v-model="addForm.name"
          maxlength="100"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('formgen.formQuestion.type')"
        prop="isPublic"
      >
        <el-radio-group
          v-for="bank in bankTypeList"
          :key="bank.value"
          v-model="addForm.bankType"
        >
          <el-radio
            :value="bank.value"
            class="ml10"
          >
            {{ bank.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="$t('formgen.formQuestion.desc')"
        prop="description"
      >
        <el-input
          v-model="addForm.description"
          maxlength="200"
          show-word-limit
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        @click="submitForm"
      >
        {{ $t("formI18n.all.confirm") }}
      </el-button>
      <el-button @click="dialogVisible = false">{{ $t("formI18n.all.cancel") }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { addQuestionBank, getQuestionBank, QuestionBank, updateQuestionBank } from "@/api/question/bank";
import { MessageUtil } from "@/utils/messageUtil";
import { i18n } from "@/i18n";

const bankTypeList = reactive([
  {
    value: 1,
    label: i18n.global.t("project.bank.survey")
  },
  {
    value: 4,
    label: i18n.global.t("project.bank.exam")
  }
]);
const rules = reactive({
  name: [
    {
      required: true,
      message: i18n.global.t("project.bank.isNull"),
      trigger: "blur"
    },
    { min: 1, max: 100, message: i18n.global.t("project.bank.nameSize"), trigger: "blur" }
  ],
  description: [{ min: 1, max: 200, message: i18n.global.t("project.bank.nameSize"), trigger: "blur" }]
});

const dialogVisible = ref<boolean>(false);
const dialogTitle = ref<string>("");
const formRef = ref();
const addForm = ref<QuestionBank>({
  name: "",
  id: null,
  description: "",
  isPublic: false,
  bankType: 1
});

const showDialog = async (node: any) => {
  if (node) {
    const res = await getQuestionBank(node.data.id);
    addForm.value = res.data;
    dialogVisible.value = true;
    dialogTitle.value = i18n.global.t("formgen.formQuestion.modifyMyBank");
  } else {
    dialogVisible.value = true;
    addForm.value.name = "";
    addForm.value.description = "";
    addForm.value.bankType = 1;
    dialogTitle.value = i18n.global.t("formgen.formQuestion.addMyBank");
  }
};

const emit = defineEmits(["refresh"]);

const submitForm = async () => {
  const valid = await formRef.value?.validate();
  if (valid) {
    if (addForm.value.id) {
      await updateQuestionBank(addForm.value);
    } else {
      await addQuestionBank(addForm.value);
    }
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
  }
  addForm.value.name = "";
  addForm.value.description = "";
  dialogVisible.value = false;
  emit("refresh");
};

defineExpose({
  showDialog
});
</script>
<style scoped></style>
